{extend name="common/__base" /}
{block name="body"}
<table id="table" lay-filter="table"></table>

<!-- 工具栏模板start -->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <input type="text" class="layui-input" id="phone" placeholder="请输入手机号">
    </div>
    <button class="layui-btn layui-btn-sm" lay-event="search"><i class="layui-icon">&#xe615;</i></button>
    <button class="layui-btn layui-btn-normal layui-btn-sm layui-right" lay-event="refresh"><i class="layui-icon">&#xe9aa;</i></button>
    <button class="layui-btn layui-btn-sm right" lay-event="add" title="添加管理员"><i class="layui-icon">&#xe654;</i></button>
</script>
<!-- 工具栏模板end -->

<!-- 状态栏start -->
<script id="status" type="text/html">
    <input type="checkbox" lay-skin="switch" value="{{d.id}}" lay-filter="status" lay-text="正常|禁用" {{d.status ? "checked" : ""}}>
</script>
<!-- 状态栏end -->

<!-- 操作栏start -->
<script id="operation" type="text/html">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 操作栏end -->
{/block}

{block name="js"}
<script>
    var table = layui.table;
    var form = layui.form;

    // 数据表格
    var dataTable = table.render({
        elem: "#table",
        cols: [[
            {field: "role", title: "角色"},
            {field: "username", title: "登录账号"},
            {field: "name", title: "姓名"},
            {field: "phone", title: "电话"},
            {field: "qq", title: "QQ"},
            {field: "create_time", title: "添加时间", sort: true},
            {field: "status", title: "状态", toolbar: "#status"},
            {title: "操作", toolbar: "#operation"},
        ]],
        url: "{:url('admin/admin/adminList')}",
        method: "post",
        parseData : function (ret) {
            return {
                "code": ret.code,
                "msg": ret.msg,
                "count": ret.data.count,
                "data": ret.data.admin_list
            };
        },
        page: true,
        toolbar: "#toolbar",
        even: true
    });

    // 状态
    form.on("switch(status)", function (obj) {
        let that = $(this);
        let status = 0;
        if (obj.elem.checked) {
            status = 1;
        } else {
            status = 0;
        }
        $.ajax({
            url: "{:url('admin/admin/setAdminStatus')}",
            type: "post",
            data: {id: obj.value, status: status},
            dataType: "json",
            success: function (ret) {
                layer.msg(ret.msg);
                if (ret.code != 1) {
                    obj.elem.checked = !status;
                    form.render();
                }
            }
        });
    });

    // 工具事件--编辑、删除
    table.on("tool(table)", function (obj) {
        if (obj.event == "edit") {
            layer.open({
                type: 2,
                title: "管理员编辑",
                shadeClose: true,
                shade: 0.6,
                maxmin: true,
                area: ['500px', '600px'],
                content: "{:url('admin/admin/editAdmin')}?id=" + obj.data.id
            });
        } else if (obj.event == "del") {
            layer.confirm("确定删除吗？", {icon: 3, title: "删除管理员"}, function () {
                $.ajax({
                    url: "{:url('admin/admin/delAdmin')}",
                    type: "post",
                    data: {id: obj.data.id},
                    dataType: "json",
                    success: function (ret) {
                        layer.msg(ret.msg);
                        if (ret.code == 1) {
                            obj.del();
                        }
                    }
                });
            });
        }
    });

    // 工具栏事件--搜索、刷新、添加
    table.on("toolbar(table)", function (obj) {
        if (obj.event == "search") {
            var phone = $("#phone").val();
            dataTable.reload({
                where: {
                    phone: phone
                },
                page: {
                    curr: 1
                }
            });
            $("#phone").val(phone);
        } else if (obj.event == "refresh") {
            location.reload();
        } else if (obj.event == "add") {
            layer.open({
                type: 2,
                title: "添加管理员",
                shadeClose: true,
                shade: 0.6,
                maxmin: true,
                area: ['500px', '600px'],
                content: "{:url('admin/admin/addAdmin')}"
            });
        }
    });
</script>
{/block}